<!--
 * @Author: Bennty
 * @Date: 2024-08-02 16:04:08
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-10-28 17:14:18
 * @Description: 请填写简介
-->
<template>
    <el-dialog v-model="props.visible" width="40%" title="财务激活" @close="handleClose">
        <el-card >
            <template #header>
                <h3>效果图：</h3>
            </template>
            <el-row>
                <el-col :span="12">
                    <el-image style="width: 260px; height: 260px;border-radius:10px" :src="props.data?.renderingsUrl" fit="fill"></el-image>
                </el-col>
                <el-col :span="12">
                    <el-form>
                        <el-form-item label="产品信息:"></el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="产品大类:">
                                    <span>{{ props.data?.productCategoriesName }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="产品小类:">
                                    <span>{{ props.data?.productSubcategoryName }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="产品名称:">
                            <span>{{ props.data?.bomName }}</span>
                        </el-form-item>
                        <el-form-item label="单价:">
                            <span>{{ props.data?.bomPrice }}元</span>
                        </el-form-item>
                        <el-form-item label="箱规:">
                            <span>{{ props.data?.boxGauge }}</span>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top: 20px">
            <template #header>
                <h3>半成品：</h3>
            </template>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in props.data?.bomRelatSemiVos" :key="item.semiProductId">
                    <div class="perpared-product">
                        <el-image :src="item.imageUrl" style="border:1px dashed grey; border-radius:10px" fit="fill"></el-image>
                        <span class="perpared-product-name">{{ item.specsDetail }}</span>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <el-card style="margin-top: 20px">
            <template #header>
                <h3>辅材：</h3>
            </template>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in props.data?.auxiliaryMaterialsVos" :key="item.auxiliaryMaterialId">
                    <div class="perpared-product">
                        <el-image :src="item.imageUrl" style="border:1px dashed grey; border-radius:10px" fit="fill"></el-image>
                        <span class="perpared-product-name">{{ item.specsDetail }}</span>
                    </div>
                </el-col>
            </el-row>
        </el-card>
        <template #footer>
                <div class="dialog-footer">
                    <el-button  type="primary" @click="handleSubmit">确 定</el-button>
                    <el-button @click="handleClose">取 消</el-button>
                </div>
            </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { financeActiveApi } from '@/api/sj/warehouse/BOM';

const props = defineProps(['visible','data']);
const emits = defineEmits(['close','submit']);

const handleClose = ()=>{
    emits('close');
};

const handleSubmit = async ()=>{
    const submitData = {
        id: props.data.id
    };
    const { code } = await financeActiveApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit', false);
    };
    
};

</script>

<style lang="scss" scoped>
.dialog-footer{
    display: flex;
    justify-content: center;
}
</style>